import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { Text, View, StyleSheet, SafeAreaView, ScrollView, Image, TouchableOpacity, Dimensions, TouchableWithoutFeedback } from 'react-native'
import { pTx } from "../../utils/dimensions"
import { Button, ConfigProvider } from '@pingtou/rn-vant'
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import httpApi from "../../api"
import { Badge } from '@pingtou/rn-vant'
import Avatar from "../../components/avatar"


const GroupList = ({ navigation, friendApplyMsg }) => {
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const groupList = useQuery(schemaName.GroupList, group => {
        return group.filtered(`UserId == ${userInfo.Id}`).sorted('G', true);
    })
    const friendMsgLis = useQuery(schemaName.FriendMsgLis, friend => {
        return friend.filtered(`UserId == ${userInfo.Id} and MT >= 40  and Unread == 1`)
    })

    const groupInfoList = useQuery(schemaName.GroupInfo, Info => {
        return Info.filtered(`UserId == ${userInfo.Id}`);
    })


    return (
        <SafeAreaView style={styles.container}>
            <ScrollView style={styles.scrollView}
                automaticallyAdjustContentInsets={false}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}>
                <View style={styles.row}>
                    {
                        groupList.map((item, index) => {
                            const groupInfo = item.G && groupInfoList.find(el => el.Id == item.G)
                            return (
                                <TouchableWithoutFeedback key={index} onPress={() => navigation.navigate('groupMsg', item)}>
                                    <View style={styles.li}>
                                        <View style={[styles.flexDirectionRow]}>
                                            <Avatar style={[styles.avatar]} source={{ uri: groupInfo?.Logo || item.L || item.P }}></Avatar>
                                            <View style={styles.cell}>
                                                <Text style={styles.name}>{item.R}</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                            )
                        })
                    }
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const mapStateToProps = (state) => (state.app)

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(GroupList)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#EDEDED",
    },
    flexDirectionRow: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    FeedbackIcon: {
        paddingLeft: pTx(14),
    },
    row: {
        backgroundColor: "#fff",
        marginBottom: pTx(24),
    },
    li: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: pTx(15),
        paddingHorizontal: pTx(15),
        borderBottomColor: "rgba(175,181,189,0.15)",
        borderBottomWidth: 1
    },
    applyMsg: {
        paddingHorizontal: pTx(4),
        paddingVertical: pTx(4),
        borderRadius: pTx(4),
        height: pTx(4),
        textAlign: "center",
        color: "#fff",
        fontWeight: "500",
        fontSize: pTx(12),
        backgroundColor: "#ee0a24"
    },
    avatar: {
        width: pTx(38),
        height: pTx(38),
        borderRadius: pTx(6),
    },
    cell: {
        marginLeft: pTx(12),
    },
    name: {
        fontSize: pTx(16),
        color: "#0A0C14"
    },
    txt: {
        marginTop: pTx(5),
        fontSize: pTx(12),
        color: "#AFB5BD",
        maxWidth: Dimensions.get('screen').width - pTx(150),
    },
})